import './index.css'
import Axios from 'axios'
import { Menu, Icon, Layout, Drawer, Button, ConfigProvider,Breadcrumb } from 'antd'
import React, { useEffect, useState } from 'react'
import drager from '../Functions/drager'
// import { Route, Redirect } from 'react-router-dom'
import Login from '../routes/login'
import Register from '../routes/register'
import zhCN from 'antd/es/locale/zh_CN'
const { Header, Content, Sider } = Layout
const { SubMenu } = Menu
Axios.defaults.baseURL = 'http://139.199.66.69:9090'
// 侧边栏模块
const SiderFn = ({ location, history, onClose, ...reset }) => {
  let defaultSelectedKeys = location.pathname
  let defaultOpenKeys = ''
  const handleLink = (path) => {
    onClose && onClose()
    history.push(path)
  }
  switch(defaultSelectedKeys) {
    case '/usermange':
    case '9': defaultOpenKeys = 'sub1'
      break
    case '/peoplemg/findpeople':
    case '/peoplemg/setpeople': defaultOpenKeys = 'sub5'
      break
    default: defaultOpenKeys = ''
  }
  return (
    <Sider>
      <div className='logo'>
        薪资管理辅助系统
          </div>
      <Menu theme="dark" mode="inline" style={{ textAlign: 'left' }} defaultOpenKeys={[defaultOpenKeys]} defaultSelectedKeys={[defaultSelectedKeys]}>
        <Menu.Item key="/" onClick={() => { handleLink('/') }
        }>
          <Icon type="home" />
          <span>Welcome</span>
        </Menu.Item>
        <Menu.Item key="/payroll" onClick={() => { handleLink('/payroll') }}>
          <Icon type="pie-chart" />
          <span>工资单提交状态</span>
        </Menu.Item>
        <Menu.Item key="/importp" onClick={() => { handleLink('/importp') }}>
          <Icon type="pie-chart" />
          <span>工资单导入</span>
        </Menu.Item>
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="user" />
              <span>用户管理</span>
            </span>
          }
        >
          <Menu.Item key="/usermange" onClick={() => { handleLink('/usermange') }}>用户列表</Menu.Item>
          <Menu.Item key="9" >权限设置</Menu.Item>
        </SubMenu>
        <SubMenu
          key="sub5"
          title={
            <span>
              <Icon type="team" />
              <span>人员信息管理</span>
            </span>
          }
        >
          <Menu.Item key="/peoplemg/findpeople" onClick={() => { handleLink('/peoplemg/findpeople') }}>人员信息查询</Menu.Item>
          <Menu.Item key="/peoplemg/setpeople" onClick={() => { handleLink('/peoplemg/setpeople') }}>人员信息维护</Menu.Item>
        </SubMenu>
        <Menu.Item key="/application" onClick={() => { handleLink('/application') }}>
          <Icon type="pie-chart" />
          <span>申请单审批</span>
        </Menu.Item>
        <Menu.Item key="/salaryscale" onClick={() => { handleLink('/salaryscale') }}>
          <Icon type="pie-chart" />
          <span>薪酬额度</span>
        </Menu.Item>
        <SubMenu
          key="sub2"
          title={
            <span onClick={() => { handleLink('/accoutmanage') }}>
              <Icon type="setting" />
              <span>系统设置</span>
            </span>
          }
        >
          <Menu.Item key="/systemsetup/PSM" onClick={() => { handleLink('/systemsetup/PSM') }}>机构管理</Menu.Item>
          <Menu.Item key="/systemsetup/Set-mamgement" onClick={() => { handleLink('/systemsetup/Set-mamgement') }}>岗位序列管理</Menu.Item>
          <Menu.Item key="10">岗位管理</Menu.Item>
          <Menu.Item key="11">职务管理</Menu.Item>
          <Menu.Item key="/accoutmanage" onClick={() => { handleLink('/accoutmanage') }}>账户管理</Menu.Item>
          <Menu.Item key="12">角色管理</Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>
  )
}

// 侧边导航抽屉
class DrawerFn extends React.PureComponent {

  state = { visible: false, placement: 'left' };
  showDrawer = () => {
    this.setState({
      visible: !this.state.visible,
    })
  };
  onClose = () => {
    this.setState({
      visible: false,
    })
  };
  onChange = e => {
    this.setState({
      placement: e.target.value,
    })
  };
  handleClick = (e, bln) => {
    bln && this.showDrawer()
  }
  componentDidMount () {
    this.props.triggerRef(this)
    drager(this.refs.drawer)
  }
  render () {
    return (
      <div>
        <Button
          ref='drawer'
          className={this.state.visible ? 'rotate show-drager' : 'show-drager'}
          shape="circle"
          icon="right"
          onClick={this.handleClick}
        >
        </Button>
        <Drawer
          className='layout-drawer'
          getContainer={false}
          placement={this.state.placement}
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}
        >
          <SiderFn className='sider' onClose={() => { this.onClose() }}  {...this.props} />
        </Drawer>
      </div>
    )
  }
}

// 主模块
function BasicLayout (props) {
  const [clientWidth, setclientWidth] = useState()
  const [chlid,setChild] = useState()
  const setclientWidthFn = () => {
    const html = document.documentElement || document.body
    const clientWidth = html.offsetWidth
    setclientWidth(clientWidth)
  }
  useEffect(() => {
    setclientWidthFn()
    window.addEventListener('resize', setclientWidthFn)
    return () => {
      window.removeEventListener('resize', setclientWidthFn)
    }
  }, [])
  const {location:{pathname}} = props
  let userMessage;
  //面包线判断
 switch(pathname) {
   case '/systemsetup/PSM':
     userMessage = (
       <Breadcrumb separator=">">
         <Breadcrumb.Item href="/accoutmanage">系统设置</Breadcrumb.Item>
         <Breadcrumb.Item >机构管理</Breadcrumb.Item>
       </Breadcrumb>
     )
     break;
    case '/accoutmanage':
      userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/accoutmanage">系统设置</Breadcrumb.Item>
         <Breadcrumb.Item >账号管理</Breadcrumb.Item>
       </Breadcrumb>
      )
      break;
      case '/accoutmanage/newEdit':
      userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/accoutmanage">系统设置</Breadcrumb.Item>
         <Breadcrumb.Item >账号管理</Breadcrumb.Item>
       </Breadcrumb>
      )
      break;
    case '/payroll':
      userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/">首页</Breadcrumb.Item>
         <Breadcrumb.Item >工资提交情况统计表</Breadcrumb.Item>
       </Breadcrumb>
      )
      break;
      case '/peoplemg/findpeople':
      userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/peoplemg/findpeople">人力基础信息管理</Breadcrumb.Item>
         <Breadcrumb.Item >员工基本信息管理</Breadcrumb.Item>
       </Breadcrumb>
      )
      break;
      case '/peoplemg/setpeople':
        userMessage = (
          <Breadcrumb separator=">">
           <Breadcrumb.Item href="/peoplemg/findpeople">人力基础信息管理</Breadcrumb.Item>
           <Breadcrumb.Item >员工信息维护</Breadcrumb.Item>
         </Breadcrumb>
        )
        break;
      case '/usermange':
      userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/usermange">用户管理</Breadcrumb.Item>
         <Breadcrumb.Item >用户列表</Breadcrumb.Item>
       </Breadcrumb>
      )
      break;
      case '/':
      userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/">首页</Breadcrumb.Item>
         <Breadcrumb.Item >Welcome</Breadcrumb.Item>
       </Breadcrumb>
      )
      break;
      default: userMessage = (
        <Breadcrumb separator=">">
         <Breadcrumb.Item href="/">首页</Breadcrumb.Item>
         <Breadcrumb.Item >Welcome</Breadcrumb.Item>
       </Breadcrumb>
      )
 }
 function bindRef(ref){
    setChild(ref)
 }
  return (
    <ConfigProvider locale={zhCN}>
      <div className='layout-normal'>
        <Layout style={{ height: "100%" }}>
          {
            clientWidth >= 575 ?
              (<SiderFn className='sider' {...props} />) :
              (<DrawerFn {...props} triggerRef={bindRef}></DrawerFn>)
          }
          <Layout>
            {
              clientWidth >= 575 ? (<Header className='header'>{userMessage} <span><i className="iconfont icon-guanyuwomen"></i>薪酬管理岗 <i className="iconfont icon-tuichu"></i></span></Header>) :<Header className="min-header"><i className="iconfont icon-daohang" onClick={()=>{chlid.showDrawer()}}></i> <span>薪资管理</span> </Header>
            }
            <Content className='content'>
              {props.children}
            </Content>
          </Layout>
        </Layout>
      </div>
    </ConfigProvider>
  )
}

export default function (props) {
  if (props.location.pathname === '/register') {
    return <Register {...props}>{props.children}</Register>
  }
  const data = JSON.parse(window.localStorage.getItem('users'))
  if (props.location.pathname === '/login' || !data) {
    props.location.pathname = '/login'
    return <Login {...props}>{props.children}</Login>
  }

  return (
    <>
      <BasicLayout {...props}>{props.children}</BasicLayout>
    </>
  )
}
